<template>
  <div>
    <a-drawer
      mask=false
      height="auto"
      :placement="placement"
      :closable="false"
      :visible="visible"
      @close="visible = false"
    >
      <div
        data-tauri-drag-region
        class="titlebar"
      >
        <div
          class="titlebar-button"
          id="titlebar-minimize"
          @click="minimize"
        >
          <minus-outlined />
        </div>
        <div
          class="titlebar-button"
          id="titlebar-maximize"
          @click="fullscreen"
        >
          <fullscreen-outlined v-if="!isFullscreen" />
          <fullscreen-exit-outlined v-if="isFullscreen" />
        </div>
        <div
          class="titlebar-button"
          id="titlebar-close"
          @click="close"
        >
          <close-outlined />
        </div>
      </div>
      <a-divider />
      <search
        class="room-search"
        v-on:change="getBroadcastUrl"
        v-on:click-tag="getBroadcastUrl"
      />
    </a-drawer>
    <flv-player
      :url="url"
      :types="type"
      class="flv-video"
      ref="flvPlayer"
    />
    <!--遮罩层-->
    <div
      class="shadow"
      @mouseenter="visible = true"
    ></div>
  </div>
</template>

<script>
import { ref, watch } from "vue";
import FlvPlayer from "./FlvPlayer";
import Search from "./Search";
import wasm from "../wasm/wanode.js";
import { invoke } from "@tauri-apps/api/tauri";
import { appWindow } from "@tauri-apps/api/window";
import {
  CloseOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
  MinusOutlined,
} from "@ant-design/icons-vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Broadcast",
  components: {
    FlvPlayer,
    Search,
    CloseOutlined,
    FullscreenExitOutlined,
    FullscreenOutlined,
    MinusOutlined,
  },
  setup() {
    const flvPlayer = ref(null);
    const url = ref(null);
    const type = ref("flv");
    const roomInfo = ref(null);
    const visible = ref(true);
    const placement = ref("top");
    const isFullscreen = ref(false);

    const getBroadcastUrl = (id) => {
      let prefix = "cdn=&rate=-1&ver=Douyu_220051305&iar=1&ive=0&";
      let did = "10000000000000000000000000001501";
      let t = new Date().getTime();
      let r = t.toString(16),
        i = parseInt("0x" + r.substring(0, r.length - 8), 16),
        o = parseInt("0x" + r.substring(r.length - 8, r.length), 16),
        n = "201806211659380f83e682207dd1293cea68f98662b1660083967948219fe20";
      let q = wasm.sqsneedalongname(id, i, o, did, n, 3186);
      let body = prefix + q + "&sov=1&tt=" + t + "&did=" + did;
      invoke("get_h5_play_url", { id: id, body: body }).then((res) => {
        if (res == null || res === "") {
          return;
        }

        url.value = res;
        visible.value = false;
      });
    };
    const minimize = () => {
      appWindow.minimize().then(() => {
        flvPlayer.value.requestPictureInPicture();
      });
    };
    const fullscreen = () => {
      appWindow.isFullscreen().then((value) => {
        isFullscreen.value = !value;
        appWindow.setFullscreen(isFullscreen.value).then(() => {
          visible.value = false;
        });
      });
    };
    const close = () => {
      appWindow.close();
    };

    watch(roomInfo, (v) => {
      getBroadcastUrl(v.value);
    });

    return {
      flvPlayer,
      url,
      type,
      roomInfo,
      visible,
      placement,
      getBroadcastUrl,
      isFullscreen,
      minimize,
      fullscreen,
      close,
    };
  },
};
</script>
<style scoped>
.shadow {
  width: 100%;
  height: 5%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
  opacity: 0;
}
.flv-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: absolute;
  left: 0;
  top: 0;
}
.titlebar {
  height: 30px;
  background: #292a2b;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  color: #e6e6e6;
  font-weight: bold;
}
.titlebar-button:hover {
  background: #43474b;
}
</style>